<template>
  <div>
    <detail-banner
     :sightName="sightName"
     :bannerImg="bannerImg"
     :bannerImgs="gallaryImgs"
    ></detail-banner>
    <detail-header></detail-header>
    <detail-list :list="categoryList"></detail-list>
  </div>
</template>

<script>
  import detailBanner from './components/Banner'
  import detailHeader from './components/Header'
  import detailList from './components/List'
  import axios from 'axios'

 export default {
   name:'Detail',
   components:{
     detailBanner,
     detailHeader,
     detailList
   },
   data(){
     return{
       sightName:'',
       bannerImg:'',
       gallaryImgs:[],
       categoryList:[]
     }
   },
   mounted(){
     this.getDetailInfo();
   },
   methods:{
     getDetailInfo(){
       axios.get('/api/detail.json',{
         params:{
           id:this.$route.params.id
         }
       }).then(this.handleGetDataSucc)
     },
     handleGetDataSucc(res){
       res = res.data;
       if(res.ret && res.data){
         const data = res.data;
         this.sightName = data.sightName;
         this.bannerImg = data.bannerImg;
         this.gallaryImgs = data.gallaryImgs;
         this.categoryList = data.categoryList;
       }
     }
   }
 }
</script>

<style lang="stylus" scoped>

</style>
